// Topic Selection Starburst 
//Final Year Project 2011
// Making Web Search Spatial

//Script to process a JSON data file and present a Sunburst Visualisation
//To function as a seclection tool for the multiview system

//Taken in part from Examples included in the documentation for the JavaScript InfoVis Toolkit
//http://thejit.org/


// Liam Sullivan       
// University of Leeds 



var labelType, useGradients, nativeTextSupport, animate;

(function() {
             
  var ua = navigator.userAgent,
  
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      
      typeOfCanvas = typeof HTMLCanvasElement,
      
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
                                textSupport = nativeCanvasSupport 
                                && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
        
        
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  
  
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  
  nativeTextSupport = labelType == 'Native';
  
  useGradients = nativeCanvasSupport;
  
  
  animate = !(iStuff || !nativeCanvasSupport);
})();




function init(json){
                
    var jsons =       
  
  
  
   {
    "children": [
       {
         "children": [
          
    
         ], 
         "data": {
           "description": "B", 
           "$color": "#B0AAF6", 
           "days": 2, 
           "$angularWidth": 1000, 
           "size": 13880
         }, 
         "id": "Topics/Business", 
         "name": "Business"
       }, 
       {
         "children": [
          
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#3366CC", 
           "days": 3, 
           "$angularWidth": 1000, 
           "size": 35549
         }, 
         "id": "Topics/Computers", 
         "name": "Computers"
       }, 
       {
         "children": [
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#B0AAF6", 
           "days": 50, 
           "$angularWidth": 17000, 
           "size": 50
         }, 
         "id": "Topics/Games", 
         "name": "Games"
       }, 
       {
         "children": [
          
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#3366CC", 
           "days": 3, 
           "$angularWidth": 7000, 
           "size": 87820
         }, 
         "id": "Topics/Health", 
         "name": "Health"
       }, 
       {
         "children": [
          
          
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#B2ABF4", 
           "days": 3, 
           "$angularWidth": 6000, 
           "size": 32900
         }, 
         "id": "Topics/Home", 
         "name": "Home"
       }, 
       {
         "children": [
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#3366CC", 
           "days": 26, 
           "$angularWidth": 2000, 
           "size": 8079
         }, 
         "id": "Topics/Recreation", 
         "name": "Recreation"
       }, 
       {
         "children": [
          
         
      
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#AEA9F8", 
           "days": 1, 
           "$angularWidth": 100, 
           "size": 13575
         }, 
         "id": "Topics/Science", 
         "name": "Science"
       }, 
       {
         "children": [
          
         ], 
         "data": {
           "description": "B", 
           "$color": "#3366CC", 
           "days": 1, 
           "$angularWidth": 100, 
           "size": 186221
         }, 
         "id": "Topics/Arts", 
         "name": "Arts"
       }
     ], 
     "data": {
       "$type": "none"
     }, 
     "id": "Topics", 
     "name": "All Topics"
   }
   
   ;
   
  
    
    
    //init Sunburst
    
    
    var sb = new $jit.Sunburst({
                                
                                
        //id container for the visualization
        
        injectInto: 'infovis',

        
         //Set canvas styles.
     
        
        
        //Distance between levels
        
        levelDistance: 90,
        
        
        //Change node and edge styles such as
        //color, width and dimensions.
        
        
        Node: {
          overridable: true,
          type: useGradients? 'gradient-multipie' : 'multipie'
        },
        
        
        //Select canvas labels
        //'HTML', 'SVG' and 'Native' are possible options
        
        
        Label: {
          type: labelType
        },
        
        
        //Change styles when hovering and clicking nodes
        
        
        NodeStyles: {
          enable: true,
          type: 'Native',
          stylesClick: {
            'color': '#00B88A'
          },
          stylesHover: {
            'color': '#d6d4fb'
          }
        },
        
        
        //Add tooltips
        
        
        Tips: {
          enable: true,
          onShow: function(tip, node) {
            var html = "<div class=\"tip-title\">" + node.name + "</div>"; 
            var data = node.data;
            if("days" in data) {
              html += "<b>Results in this topic:</b> " + data.days;
            }
        
            tip.innerHTML = html;
          }
        },
        
        //implement event handlers
        
        
        Events: {
          enable: true,
          onClick: function(node) {
            if(!node) return;
            
            
            //Trigering DOM events on topic clicks
            
            
            var html = "<h4>" + node.name + "</h4>", data = node.data;
            
            if("size" in data) {
              html += "<br /><br /><b>Number of Results in Topic:</b> " + Math.round(data.size / 1024);
            }
            if("description" in data) {
              html += "<br /><br /><b>Topic Rank:</b><br />" + data.description;
            }
            $jit.id('inner-details').innerHTML = html;
            
            
            //hide tip
            
            sb.tips.hide();
            
            
            //rotate
            sb.rotate(node, animate? 'animate' : 'replot', {
              duration: 1000,
              transition: $jit.Trans.Quart.easeInOut
            });
            
          }
        },
        
        
        // Only used when Label type is 'HTML' or 'SVG'
        // Add text to the labels. 
        // This method is only triggered on label creation
        
        
        onCreateLabel: function(domElement, node){
          var labels = sb.config.Label.type,
              aw = node.getData('angularWidth');
              
              
          if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
            domElement.innerHTML = node.name;
          } else if (labels === 'SVG' && (node._depth < 2 || aw > 2000)) {
            domElement.firstChild.appendChild(document.createTextNode(node.name));
          }
        },
        
        
        // Only used when Label type is 'HTML' or 'SVG'
        // Change node styles when labels are placed
        // or moved.
        
        
        onPlaceLabel: function(domElement, node){
          var labels = sb.config.Label.type;
          
          if (labels === 'SVG') {
            var fch = domElement.firstChild;
            var style = fch.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "10.0em";
            fch.setAttribute('fill', "#fff");
            
            
          } else if (labels === 'HTML') {
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "10.0em";
            style.color = "#ddd";
            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
          }
        }
   });
    //load JSON data.
    sb.loadJSON(json);
    
    //compute positions and plot.
    sb.refresh();
    
    //end
}